#{extends 'AdminM/frame.html'/}

#{set 'moreScripts'}
<script src="@{'/public/ckeditor/ckeditor.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/ckeditor/adapters/jquery.js'}" type="text/javascript" charset="utf-8"></script>

<link href="@{'/public/uploadify/uploadify.css'}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="@{'/public/uploadify/swfobject.js'}"></script>
<script type="text/javascript" src="@{'/public/uploadify/jquery.uploadify.v2.1.4.min.js'}"></script>
#{/set}
#{set 'activeItem'}3#{/set}

<style>
*{ 覆盖上传进度条样式 }*
.uploadifyQueueItem{width: 100%};
</style>

<script language="javascript">
$(function(){
	//$( 'textarea' ).ckeditor(); //使用ckeditor
	CKEDITOR.replace('commodityContent');
	
	resetOnSaleStatus();
	
	/* uploadify2 */
	$('#image_upload').uploadify({
	    uploader	: '@{'/public/uploadify/uploadify.swf'}',
	    script		: '@{Attachments.create_uploadify}',
	    cancelImg	: '@{'/public/uploadify/cancel.png'}',
	    fileDataName: 'file',
	    fileExt     : '*.jpg;*.gif;*.png',
		fileDesc    : 'Image Files (.JPG, .GIF, .PNG)',
		sizeLimit   : 1024000,
    	auto		: true,
    	onComplete	: function(event, ID, fileObj, response, data){
    		//显示附件
    		var getAttachmentAction = #{jsAction @Attachments.show(':id') /}
    		$("#image").attr('src', getAttachmentAction({id: response}));
    		//将附件ID添加到form里面
    		$("#image_upload").val(response);
    	}
	});
	
	//初始化弹出窗
	$("#dialog-form").dialog({
		autoOpen: false,
		height: 500,
		width: 500,
		modal: true,
		buttons: {
			'插入': function() {
				var attId = $("#image_upload2").val();
				var imgHtml = "<img alt='"+attId+"' title='"+attId+"' src='/attachments/"+attId+"'/>";
				CKEDITOR.instances.commodityContent.insertHtml(imgHtml);
				//activeImage(attId,function(){$('#dialog-form').dialog('close');});
				activeImage(attId, 
					function(){
						$('#dialog-form').dialog('close');
					}
				);
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		close: function() {
			$("#image_upload2").val("");
			$("#image2").attr('src', "@{'/public/images/image-placeholder.png'}");
		}
	});
	
	/* uploadify2 */
	$('#image_upload2').uploadify({
	    uploader	: '@{'/public/uploadify/uploadify.swf'}',
	    script		: '@{Attachments.create_uploadify}',
	    cancelImg	: '@{'/public/uploadify/cancel.png'}',
	    fileDataName: 'file',
	    fileExt     : '*.jpg;*.gif;*.png',
		fileDesc    : 'Image Files (.JPG, .GIF, .PNG)',
		sizeLimit   : 1024000,
    	auto		: true,
    	onComplete	: function(event, ID, fileObj, response, data){
    		//显示附件
    		var getAttachmentAction = #{jsAction @Attachments.show(':id') /}
    		$("#image2").attr('src', getAttachmentAction({id: response}));
    		//将附件ID添加到form里面
    		$("#image_upload2").val(response);
    	}
	});
});

function resetOnSaleStatus() {
	var quantityLeft = $("#quantityLeft");
	var onSaleStatus = $("#onSaleStatus").val();
	if("ONSALE_LIMITED" != onSaleStatus) {
		$(quantityLeft).css("display", "none");
		//quantityLeft.style.display = "none";
	} else {
		$(quantityLeft).css("display", "inline");
		//quantityLeft.style.display = "inline";
	}
}

function goBack() {
	window.location.href="/admin/commodities;admin";
}

function insertImage(){
	$('#dialog-form').dialog('open');
}

function activeImage(id, callback) {
	$.ajax({
		url: "/attachments/active/"+id,
		type: "POST",
		dataType: "json",
		complete: function(XMLHttpRequest, textStatus, errorThrown) {
			if(textStatus == "error") {
				var errJson = eval("("+XMLHttpRequest.responseText+")");
				var errMsg = "操作失败，"+errJson.message;
				$("#errMsg").html(errMsg);
				alert(errMsg);
			} else {
				callback();
			}
		}
	});
}
</script>

<style>
#commodity-image{
	float: right;
	margin-top: 20px; margin-right: 20px;
}
#commodity-image #image{
	display: block; width: 225px; height: 225px;
}
#new-form{
	font-size: 1.4em;
}
#new-form p{
	margin: 10px 0;
	display: inline-block;
}
</style>
<div class="navigationBar">
	<table>
		<tr>
			<td><img src="@{'/public/images/navigationHouse.gif'}"></td>
			<td><strong>当前位置：</strong></td>
			<td>
				<a href="/admin">首页</a>
				>>
				<a href="#">商品管理</a>
				>>
				<font class="current">新建商品</font>
			</td>
		</tr>
	</table>
</div>

#{form @admin.Commodities.create(), id:'new-form'}
	
	#{ifErrors}
        <p class="error">
            Please correct these errors.
            <!-- #{errors}
            	${error}
            #{/errors} -->
        </p>
    #{/ifErrors}
    <fieldset>
    <div id="commodity-image">
    	#{if att}
			<img id="image" src="@{Attachments.show(att.id)}"/>(大小1M以下)
			<p><input id="image_upload" type="text" name="att.id" value="${att.id}"/></p>
		#{/if}
		#{else}
			<img id="image" src="@{'/public/images/image-placeholder.png'}"/>(大小1M以下)
    		<p><input id="image_upload" type="text" name="att.id" /></p>
		#{/else}
    	<font class="important_1_1">*</font>&nbsp;<br>
		<span class="error">#{error 'att' /}</span>
    </div>
    <p>
        #{field 'commodity.name'}
        <label>商品名称:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.name}" class="${field.errorClass}" />
        <font class="important_1_1">*</font>&nbsp;
		<span class="error">#{error 'commodity.name' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.SN'}
        <label>商品编号:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.SN}" class="${field.errorClass}" />
        <font class="important_1_1">*</font>&nbsp;
		<span class="error">#{error 'commodity.SN' /}</span>
        #{/field}
    </p>
    <p>    
        #{field 'commodity.manufacturerSN'}
        <label>厂家编号:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.manufacturerSN}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
		<span class="error">#{error 'commodity.manufacturerSN' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.material'}
        <label>商品材质:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.material}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
        <span class="error">#{error 'commodity.material' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.unit'}
        <label>商品单位:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.unit}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
		<span class="error">#{error 'commodity.unit' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.size'}
        <label>商品尺寸:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.size}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
		<span class="error">#{error 'commodity.size' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.placeOfOrigin'}
        <label>商品产地:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.placeOfOrigin}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
        <span class="error">#{error 'commodity.placeOfOrigin' /}</span>
        #{/field}
    </p>
    <p>
        #{field 'commodity.packaging'}
        <label>包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.packaging}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
        <span class="error">#{error 'commodity.packaging' /}</span>
        #{/field}
    </p>
    <p>    
        #{field 'commodity.numberPerBox'}
        <label>装箱数量:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.numberPerBox}" class="${field.errorClass}" />
        &nbsp;&nbsp;&nbsp;
        <span class="error">#{error 'commodity.numberPerBox' /}</span>
        #{/field}
    </p>
    <p>    
        #{field 'commodity.cost'}
        <label>成本价格:</label>
        <input type="text" name="${field.name}" 
            value="${commodity?.cost}" class="${field.errorClass}" />
        <span class="important_1_1">*</span>&nbsp;
        <span class="error">#{error 'commodity.numberPerBox' /}</span>
        #{/field}
    </p>
    <p>
    	<label>重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量:</label>
        #{field 'commodity.weight'}
        <input type="text" name="${field.name}" 
            value="${commodity?.weight}" class="${field.errorClass}" />
        <span class="important_1_1">*</span>&nbsp;
        <span class="error">#{error 'commodity.weight' /}</span>
        #{/field}
    </p>
    <p>
    	<label>所属品牌:</label>
        #{field 'commodity.brand'}
        <select name="commodity.brand.id">
        	<option value=""></option>
        	#{if brands}
        	#{list items:brands, as:'brand'}
        	<option value="${brand.id}" #{if brand.id == commodity?.brand?.id}selected#{/if}>${brand.name}</option>
        	#{/list}
        	#{/if}
        </select>
        <span class="important_1_1">*</span>&nbsp;
        <span class="error">#{error 'commodity.brand' /}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        #{/field}
    </p>
    <p>    
        #{field 'price'}
        <label>出售价格:</label>
        <input type="text" name="${field.name}" 
            value="${price}" class="${field.errorClass}" />
        <span class="important_1_1">*</span>&nbsp;
        <span class="error">#{error 'price' /}</span>
        #{/field}
    </p>
    <p>
    	<label>货存数量:</label>
        #{field 'commodity.onSaleStatus'}
        <select id="onSaleStatus" name="${field.name}" onChange="resetOnSaleStatus()">
        	<option value="ONSALE_LIMITED" #{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_LIMITED}selected#{/if}>有货</option>
        	<option value="ONSALE_UNLIMITED" #{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_UNLIMITED}selected#{/if}>长期有货</option>
        	<option value="OFFSALE" #{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.OFFSALE}selected#{/if}>商品下架</option>
        </select>
        <input type="text" id="quantityLeft" name="commodity.quantityLeft" value="${commodity?.quantityLeft}">
        <span class="important_1_1">*</span>&nbsp;
        <span class="error">#{error 'commodity.onSaleStatus' /}</span>
        <span class="error">#{error 'commodity.quantityLeft' /}</span>
        #{/field}
    </p>
    </fieldset>
    <fieldset>
    <p>
        #{field 'commodity.description'}
        <label>商品描述:</label>
        <br>
        <input value="插入图片" type="button" onClick="insertImage()">
        <br>
        <textarea id='commodityContent' name="${field.name}" class="${field.errorClass}">${commodity?.description}</textarea>
        #{/field}
    </p>
    </fieldset> 
    <p>
    	<input type="submit" value="创建商品" />
    	<input type="button" value="返回" onClick="history.back();"/>
    	<input type="button" value="返回列表" onClick="goBack()"/>
    </p>
#{/form}

<div id="dialog-form" title="上传图片">
	<fieldset>
		<div style="width:100%; text-align:center;">
			<img id="image2" src="@{'/public/images/image-placeholder.png'}"/>
	    	<p><input id="image_upload2" type="text" name="attId" /></p>
    	</div>
	</fieldset>
</div>